<template>
  <div class="content">
    <p>基础用法</p>
    <div class="group anvil">
      <anvil-transfer v-model="value" :data="data"></anvil-transfer>
    </div>

    <div class="group el">
      <el-transfer v-model="value" :data="data"></el-transfer>
    </div>

    <p>可搜索</p>
    <div class="group anvil">
      <anvil-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入城市拼音"
        v-model="valueFilter"
        :data="dataFilter"
      >
      </anvil-transfer>
    </div>

    <div class="group el">
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入城市拼音"
        v-model="valueFilter"
        :data="dataFilter"
      >
      </el-transfer>
    </div>

    <p>可自定义（使用 render-content 自定义数据项）</p>
    <div class="group anvil">
      <anvil-transfer
        v-model="valueCustom"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        @change="handleChange"
        :data="dataCustom"
      >
        <template #left-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
      </anvil-transfer>
    </div>

    <div class="group el">
      <el-transfer
        v-model="valueCustom"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :render-content="renderFunc"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        @change="handleChange"
        :data="dataCustom"
      >
        <template #left-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
      </el-transfer>
    </div>

    <p>可自定义（使用 scoped-slot 自定义数据项）</p>
    <div class="group anvil">
      <anvil-transfer
        style="text-align: left; display: inline-block"
        v-model="valueCustom4"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        @change="handleChange"
        :data="dataCustom2"
      >
        <template #default="{ option }">
          <span>{{ option.key }} ~ {{ option.label }}</span>
        </template>
        <template #left-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
      </anvil-transfer>
    </div>

    <div class="group el">
      <el-transfer
        style="text-align: left; display: inline-block"
        v-model="valueCustom4"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['到左边', '到右边']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        @change="handleChange"
        :data="dataCustom2"
      >
        <template #default="{ option }">
          <span>{{ option.key }} ~ {{ option.label }}</span>
        </template>
        <template #left-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">操作</el-button>
        </template>
      </el-transfer>
    </div>

    <p>数据项属性别名</p>
    <div class="group anvil">
      <anvil-transfer
        v-model="valueAlias"
        :props="{
          key: 'value',
          label: 'desc'
        }"
        :data="dataAlias"
      >
      </anvil-transfer>
    </div>

    <div class="group el">
      <el-transfer
        v-model="valueAlias"
        :props="{
          key: 'value',
          label: 'desc'
        }"
        :data="dataAlias"
      >
      </el-transfer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const generateData = (_) => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }

    const generateDataFilter = (_) => {
      const data = []
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        })
      })
      return data
    }

    const generateDataCustom1 = (_) => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }

    const generateDataCustom2 = (_) => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }

    const generateDataAlias = (_) => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          value: i,
          desc: `备选项 ${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }

    return {
      data: generateData(),
      value: [1, 4],

      dataFilter: generateDataFilter(),
      valueFilter: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1
      },

      dataCustom: generateDataCustom1(),
      valueCustom: [1],
      valueCustom4: [1],
      renderFunc(h, option) {
        // return (
        //   <span>
        //     {option.key} - {option.label}
        //   </span>
        // )
      },

      dataCustom2: generateDataCustom2(),
      renderFunc2(h, option) {
        // return (
        //   <span>
        //     {option.key} - {option.label}
        //   </span>
        // )
      },

      dataAlias: generateDataAlias(),
      valueAlias: []
    }
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    }
  }
}
</script>

<style lang="scss" scoped>
.group {
  /* border: 1px solid red; */
  padding: 6px;

  &.anvil {
    border-color: skyblue;
  }

  &.el {
    border-color: gray;
    display: block;
  }
}
</style>
